<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/*
			 * 伪类专门用来表示元素的一种的特殊的状态，
			 * 	比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框
			 * 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类
			 */
			
			/*
			 * 为没访问过的链接设置一个颜色为绿色
			 * 	:link
			 * 		- 表示普通的链接（没访问过的链接）
			 */
			a:link{
				color: yellowgreen;
			}
			
			/*
			 * 为访问过的链接设置一个颜色为红色
			 * 	:visited
			 * 		- 表示访问过的链接
			 * 
			 * 浏览器是通过历史记录来判断一个链接是否访问过,
			 * 	由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
			 * 
			 */
			a:visited{
				color: red;
			}
			
			/*
			 * :hover伪类表示鼠标移入的状态
			 */
			a:hover{
				color: skyblue;
			}
			
			/*
			 * :active表示的是超链接被点击的状态
			 */
			a:active{
				color: black;
			}
			
			/*
			 * :hover和:active也可以为其他元素设置
			 * IE6中，不支持对超链接以外的元素设置:hover和:active
			 */
			/*p:hover{
				background-color: yellow;
			}
			
			p:active{
				background-color: orange;
			}*/
			
			/*
			 * 文本框获取焦点以后，修改背景颜色为黄色
			 */
			input:focus{
				background-color: yellow;
			}
			
			/**
			 * 为p标签中选中的内容使用样式
			 * 	可以使用::selection为类
			 * 	注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection
			 */
			
			/**
			 * 兼容火狐的
			 */
			p::-moz-selection{
				background-color: orange;
			}
			
			/**
			 * 兼容大部分浏览器的
			 */
			p::selection{
				background-color: orange;
			}
			
		</style>
	</head>
	<body>
		
		
		<a href="http://www.baidu.com">访问过的链接</a>
		<br /><br />
		<a href="http://www.baidu123456.com">没访问过的链接</a>
		
		<p>我是一个段落</p>
		
		<!-- 使用input可以创建一个文本输入框 -->
		<input type="text" />
		
	</body>
</html>
